<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-v2.3.2.js"></script>
    <script>
        //准备一个空的实例对象
        var Event=new Vue();

        var A={
            template:`
            <div>
                <span>我是A组件</span> ->{{a}}
                <input type="button" value="把A数据给C" @click="send">
            </div>
            `,
            data(){
                return{
                    a:"我是a数据"
                }
            },
            methods:{
                send(){
                    Event.$emit("a-msg",this.a);
                }
            }
        };
        var B={
            template:`
            <div>
                <span>我是B组件</span> ->{{a}}
                <input type="button" value="把B数据给C">
            </div>
            `,
            data(){
                return{
                    a:"我是b数据"
                }
            }
        };
        var C={
            template:`
            <div>
                <h3>我是C组件</h3>
                <span>接手过来的A的数据：{{a}}</span>
                <span>接手过来的B的数据：{{b}}</span>
            </div>
            `,
            data(){
                return{
                    a:'',
                    b:''
                }
            },
            mounted(){
                Event.$on("a-msg",function(a){
                    console.log(this);
                    this.a=a;
                }.bind(this))
            }
        };
       window.onload=function(){
            new Vue({
                el:"#box",
                data:{
                    a:"我是父组件数据"
                },
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            })
        }
    </script>
</head>
<body>
<div id="box">
   <com-a></com-a>
   <com-b></com-b>
   <com-c></com-c>
</div>
</body>
</html>